<template>
  <div class="cart">
    <my-header>
      <template #left>
        <span style="color: red" @click="isEit=!isEit"> {{isEit?'编辑':'完成'}} </span>
      </template>
      <template #center> 购物车 </template>
    </my-header>
    <div class="content">
      <img
        v-if="!token || cartList.length == 0"
        src="../../assets/img/dp.png"
        alt=""
      />
      <div class="cart_ct" v-else>
        <van-swipe-cell v-for="(item, index) in cartList" :key="index">
          <van-checkbox
            v-model="item.check"
            checked-color="#ee0a24"
            @change="checkOne"
          ></van-checkbox>
          <van-card :thumb="item.img">
            <template #tags>
              <div class="self">
                <h6>{{ item.name }}</h6>
                <p>{{ item.ties }}</p>
                <section>
                  <span>￥{{ item.price }}</span>
                  <van-stepper v-model="item.buyNum" />
                </section>
              </div>
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="$store.commit('delect',index)"
            />
          </template>
        </van-swipe-cell>
      </div>
      <my-like></my-like>
    </div>
    <van-submit-bar :price="allPrice" :button-text="isEit?'提交订单':'删除所选'" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="$store.commit('checkAll',checked)">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import myHeader from "../../components/myHeader.vue";
import MyLike from "../../components/myLike.vue";
import { useStore } from "vuex";
import { useRouter } from 'vue-router';
export default {
  components: { myHeader, MyLike },
  setup() {
    const { push } = useRouter();
    const { state,commit } = useStore();
    let token = localStorage.getItem("token");
    let cartList = computed(() => state.cartList);
    const data = reactive({
      checked: cartList.value.length?cartList.value.every(item => item.check):false,
      isEit: true,
      allPrice: computed(() => {
        let price = 0;
        cartList.value.forEach(item =>{
           if(item.check){
             price+=item.price*item.buyNum
           }
        })
        return price*100;
      })
    })

    const checkOne = () => { // 单选函数
      data.checked = cartList.value.every(item => item.check);
      commit('kong');
    }
    const onSubmit = () => { // 提交订单的函数 
      if (data.isEit) {
        let token = localStorage.getItem('token');
        let bool = cartList.value.some(item => item.check);
        // some 是数组的方法，只要有一个满足条件，就返回true
        if (!bool){
          alert('请选择商品数据');
          return;
        }
        if (token){
          commit('addOrder'); // 提交订单的方法
          push('/order');
        } else {
          push('/login');
        }
        return;
      }
      commit('remove');
      data.checked = false;
    }
    return {
      token,
      cartList,
      ...toRefs(data),
      onSubmit,
      checkOne
    };
  },
};
</script>
<style lang="scss" scoped>
.cart {
  img {
    width: 100%;
  }
  .content {
    height: calc(100% - 100px);
    overflow: auto;
  }
  // /deep/ 在vue2 里面我们可以这样使用
  :deep(.van-swipe-cell__wrapper) {
    display: flex;
    padding: 0 10px;
    margin-bottom: 10px;
    background: #fff;
    .van-card {
      margin: 0;
      flex: 1;
      background: #fff;
      p {
        color: #b2b2b2;
        width: 100%;
      }
      .self {
        margin: 10px 0;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        section {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }

    .van-button {
      height: 100%;
    }
  }
  .van-submit-bar{
    bottom: 50px;
  }
}
</style>